﻿@{
    ViewBag.Title = "Show";
}

<h2>Show</h2>

<div class="row-fluid">
  <div class="span10">
    <div id="divTopic-j" style="word-wrap:break-word;">
        <div>
            <ul class="nav-stacked">
                <div data-bind="with: topic">
                    <li>
                        <div class="pull-right">
                            <img data-bind='attr: {src: thumbnail}' />
                        </div>
                        <a data-bind="text: title"></a>
                        <div data-bind="text: subTitle"></div>
                        <div data-bind="html: content"></div>
                    </li>
                    <div data-bind="with: vote">
                         <i class="icon-thumbs-up" data-bind="authClick: voteUp"></i><span data-bind='text: voteUpCount'></span>
                         <i class="icon-thumbs-down" data-bind="authClick: voteDown"></i><span data-bind='text: voteDownCount'></span>
                    </div>
                </div>
                <div data-bind="foreach: pageComments.models">
                    <div>
                       <div>
                          <div data-bind='html: content'></div>
                       </div>
                       <div data-bind="with: vote">
                            <i class="icon-thumbs-up" data-bind="authClick: voteUp"></i><span data-bind='text: voteUpCount'></span>
                            <i class="icon-thumbs-down" data-bind="authClick: voteDown"></i><span data-bind='text: voteDownCount'></span>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <div id="divPage-j">
        <div data-bind="with: pageComments">
            <div data-bind="pagination, attr:{ id: $root.topic.id() }"></div>
        </div>
    </div>
    <div id="divNewCommentHolder-j">
        <div><textarea readonly data-bind="kindEditorValue: content"></textarea></div>
        <button class="btn btn-large"  data-bind="enable: isOperationValid, authClick:save, svBack:serverStatus, svSuccCallBack:fn.afterNewCommentSaved " >@LocaleResources["Comment.Publish"]</button>
    </div>
  </div>
  <br />  <br />  <br />
  <div class="span2 pull-right">
    <button auth-required="true" auth-link="/topic/new/" auth-duration="0" class="btn btn-large btn-primary">@LocaleResources["Topic.CreateTopic"]</button>
  </div>
</div>

@{
    ScriptRegister.AddKnockOutBinding("commentsPerTopic", "#divTopic-j, #divPage-j");
    ScriptRegister.AddKnockOutBinding("newComment", "#divNewCommentHolder-j");
 }  
<script type="text/javascript">
    amplify.subscribe($ca.notification.serverUserAuthenticatedEvent, function () {
        newComment.checkUploadPermission("/api/comment/checkuploadpermissionfornewcomment", function () {
            var newCommentHolder = $('#divNewCommentHolder-j');
            KindEditor.remove(newCommentHolder.find('textarea'));
            ko.unapplyBindings(newCommentHolder, false);
            ko.applyBindings(newComment, newCommentHolder[0]);
        });
    });
</script>

